<template>
	<view class="square">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>

		<!--  搜索感兴趣的社团 -->
		<view class="search" v-if="isLoading">
			<view class="search-boxes flex align-center ">
				<input class="inputSearch1 basis-xl" v-model="keywords" type="text" placeholder="搜索您感兴趣的社团" />
				<view class="cuIcon-search basis-xs   text-right" @click="search()"></view>
			</view>
		</view>

		<!-- 轮播 -->
		<view class="banner-box ">
			<image :src="res+'/static/shetuan/banner.png'" mode="aspectFit"></image>
		</view>
		<!-- 推荐 -->

		<view class="recommend-box">

			<view class="title">
				推荐社团
			</view>

			<view class="" v-if="isLoading">
				<view class="scroll-view flex flex-wrap" v-if="recommend.length>0">
					<view class="scroll-view-item middle flex-direction " v-for="(item,i) in recommend" :key="i">
						<image class="img  round" :src="item.logo" mode=""></image>
						<text class="name">{{item.name}}</text>
						<text class="desc text-cut">{{item.tag}}</text>
						<view class="btn-box round middle nojoin" @click="join(item.club_id)">
							查看
						</view>
					</view>
				</view>
				<view class="middle text-gray" v-else>
					暂无信息
				</view>

			</view>

			<view class="middle" v-else>
				<view class="cu-load load-cuIcon " :class="!isLoading?'loading':'over'"></view> 加载中...

			</view>



		</view>




	</view>
</template>

<script>
	import {
		getData
	} from "../../static/shetuan/api.js"
	export default {
		data() {
			return {
				title: "社团",
				res: this.apiHost + "/static/otherApp/",
				recommend: [],
				isLoading: false,
				isSearch: false,
				keywords: "",
				list: []



			}

		},
		watch: {
			keywords(val) {
				this.search();
			}
		},
		onShow() {
			this.recommendList(true);
		},
		methods: {

			//社团列表
			recommendList(is_rec) {
				this.apiRequest('/buyer/ClubList', {
					area_id: uni.getStorageSync('area_id'),
					is_rec: true,
				}, 0, 'POST').then(res => {
					this.isLoading = true;

					if (res.code == 200) {
						this.recommend = res.data.data;
						this.list = this.recommend;
					}

				}).catch(() => {
					this.isLoading = true;
				})
			},

			join(id) {
				uni.navigateTo({
					url: "./info?id=" + id
				})
			},
			search() {
				if (this.keywords.length == 0) {
					uni.showToast({
						title: "请输入要查询的社团信息",
						icon: "none"
					})
					this.recommend = this.list;
					return false;
				}
				let data = this.keywords;
				let _recommend = this.recommend;
				let arr = [];
				arr = _recommend.filter((item) => {
					let k = false,
						val;

					let array = {
						index: ['tag', 'type', 'name', 'contact_name']

					};
					for (let i in array.index) {
						let key = array.index[i];
						val = new String(item[key]);
						if (val.includes(data)) {
							k = true;
							break;
						}
					}
					return k;
				})
				this.recommend = arr;
			}



		}



	}
</script>

<style scoped lang="scss">
	.square {
		$w: calc(100vw*(702/750));

		.search {
			width: 100vw;
			height: calc(100vw*(72/750));
			position: relative;

			.search-boxes {
				position: fixed;

				width: $w;
				z-index: 99;
				margin-left: calc(100vw*(24/750));
				height: calc(100vw*(72/750));
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				padding: 0 38rpx;

				.cuIcon-search {
					font-size: 36rpx;
					color: #999999;
				}

			}

		}


		.banner-box {
			margin: 20rpx 24rpx;
			height: calc(100vw*(200/750));
			border-radius: 20rpx;

			image {
				width: $w;
				height: calc(100vw*(200/750));
			}
		}

		.recommend-box {

			.title {
				margin: 20rpx 45rpx 0 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 62rpx;

			}

			.scroll-view {
				$w: calc(100vw*(702/750));
				min-height: calc(100vw*(300/750));
				margin: 0 20rpx;


				.scroll-view-item {
					width: calc(100vw*(228/750));
					background: #FFFFFF;
					box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
					border-radius: 20rpx;
					padding: 30rpx;
					margin-right: 9rpx;
					margin-top: 20rpx;

					.img {
						width: calc(100vw*(100/750));
						height: calc(100vw*(100/750));
					}

					.name {
						font-size: 24rpx;
						font-weight: 800;
						color: #333333;
						margin-top: 14rpx;
					}

					.desc {
						font-size: 18rpx;
						font-weight: 500;
						color: #999999;
						margin-top: 10rpx;
						text-align: center;
						width: 80%;
					}

					.btn-box {
						margin-top: 19rpx;
						min-width: calc(100vw*(150/750));
						height: calc(100vw*(50/750));
						font-size: 24rpx;
						font-weight: 500;

					}

					.nojoin {
						color: #FFFFFF;
						background: #1270E0;
					}

					.join {
						background-color: rgba(195, 195, 195, 0.2);
						color: rgba(0, 0, 0, 0.5);
					}

				}


			}

		}



	}
</style>
